<template>
<!--    <dv-scroll-board v-if="change" :config="scrollConfig" :style="{ width: width+'px', height: height-30+'px' }"/>-->
    <div :style="{ width: width+'px', height: height-40+'px' }">
      <div class="scroll-wrap">
        <div class="scroll-header">
          <ul class="header-scroll-ul">
            <li class="scroll-li">
              <div style="width: 30%">联网单位</div>
              <div style="width: 32%">状态</div>
              <div style="width: 35%">联系人</div>
            </li>
          </ul>
        </div>
        <div class="scroll-content">
          <Vue3SeamlessScroll :limitScrollNum="6" v-if="change" :singleHeight="20" :singleWaitTime="10" :hover="true" class="scroll-list" :list="scrollConfig.data">
            <ul class="scroll-ul">
              <li class="scroll-li" @click="itemClick(item)" style="cursor: pointer;" v-for="(item, index) in scrollConfig.data" :key="index">
                <div style="width: 40%" :title="item.name">{{ item.name }}</div>
                <div style="width: 20%" v-html="item.state"></div>
                <div style="width: 40%" :title="item.linkman">{{ item.linkman }}</div>
              </li>
            </ul>
          </Vue3SeamlessScroll>
        </div>
      </div>
    </div>

</template>

<script>
import request from "@/utils/request.js";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import store from "@/store/index.js";
export default {
  components: {Vue3SeamlessScroll},
  props:{
    width:Number,
    height:Number
  },
  name: "UnitList",
  data() {
    return {
      change:false,
      scrollConfig:{
        data: [],
      },
      resizeTimer: null // 定时器
    };
  },
  computed: {
    searchClientName() {
      return this.$store.state.searchClientName;　　//需要监听的数据
    }
  },
  watch:{
    searchClientName(newValue, oldValue){
      this.getCount()
    }
  },
  mounted() {
    this.getCount()
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  methods: {
    getCount() {
      this.change=false
      let level = JSON.parse(localStorage.getItem("user")).level
      let organizationId = JSON.parse(localStorage.getItem("user")).organization
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      this.scrollConfig.data=[]
      request.get("/client/listbyName?name="+this.searchClientName+"&organizationId="+organizationId+"&level="+level+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then((res) => {
        res.data.forEach(item => {
          let state = ""
          if (item.state === "0") {
            state = "<span><i style='color: rgb(12,199,22)'>正常</i></span>"
          } else if (item.state === "1") {
            state = "<span><i style='color: rgb(245,9,9)'>冻结</i></span>"
          } else if (item.state === "2") {
            state = "<span><i style='color: rgb(187,199,12)'>暂停使用</i></span>"
          }
          item.state=state
          this.scrollConfig.data.push(item)
        })
        this.change=true
      });
    },
    itemClick(client){
      this.$emit("fatherMethod")
      const item = Object.assign({}, client)
      store.commit("updateCurrentClientInfo", item)
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.updateData(); // 重新渲染 echarts 图表
      }, 1000); // 设置延迟时间，500ms
    },
  },
};
</script>

<style scoped>
.scroll-wrap {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.scroll-list {
  overflow: hidden;
  line-height: 46px;
  margin: 0;
}

.scroll-ul{
  margin: 0;
  padding: 0;
}

.header-scroll-ul{
  margin: 0;
}

.scroll-li {
  overflow: hidden;
  color: #2CC2EF;
  text-align: center;
  display: flex;
  font-size: 16px;
}

.scroll-li > div {
  display: block; /* 改为 block 以支持 text-overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: inherit;
  flex-shrink: 0; /* 确保不会缩小 */
}

.scroll-header .scroll-li {
  background-color: rgba(4,19,65,0.4);
  font-weight: bold;
  border-top: none;
}
.scroll-content .scroll-li:nth-child(odd) {
  background-color: rgba(4,19,65,0.4); /* Light gray for odd rows */
}

.scroll-content .scroll-li:nth-child(even) {
  background-color: rgba(1,19,56,0.47); /* White for even rows */
}
.scroll-content .scroll-li > div:hover {
  color: #1369a8; /* 悬浮时背景颜色 */
}
</style>
